<template>
    <div id='after-loan-allot-index'>
        <!-- <h1 class="card-title">
            <span>贷后分配</span>
        </h1> -->
        <div class="form-table">
            <div class="form-content">
                <div class="content-top">
                    <div class="form-item">
                        <div class="form-item__key">分配状态：</div>
                        <div class="form-item__value">
                            <select-box v-model='allotSelect' text='所有'>
                                <select-option value='' text='所有'></select-option>
                                <select-option value='1' text='已分配'></select-option>
                                <select-option value='2' text='未分配'></select-option>
                            </select-box>
                        </div>
                    </div>

                    <div class="form-item">
                        <div class="form-item__key">分配人员：</div>
                        <!-- v-if='operatorList.length' -->
                        <div class="form-item__value" >
                            <select-box v-model='operatorHeaderSelect' text='所有'>
                                <select-option value='' text='所有'></select-option>
                                <select-option v-for='item in operatorList' :key='item.id' :value='item.id' :text='item.name'></select-option>
                            </select-box>
                        </div>
                    </div>

                    <div class="form-item">
                        <div class="form-item__key">手机号：</div>
                        <div class="form-item__value">
                            <input type="text" placeholder="请输入手机号码" v-model='phone'>
                        </div>
                    </div>
                </div>
                <div class="content-top">
                        <div class="form-item">
                            <div class="form-item__key">开始时间：</div>
                            <div class="form-item__value">
                                <picker-date picker-id='startTime' :key='startTime' placeholder='请选择开始时间' v-model='startTime'></picker-date>
                            </div>
                        </div>

                        <div class="form-item">
                            <div class="form-item__key">结束时间：</div>
                            <div class="form-item__value">
                                <picker-date picker-id='endTime' :key='endTime' placeholder='请选择结束时间' v-model='endTime'></picker-date>
                            </div>
                        </div>
                    <a class="card-title__button" @click='getList()'>确定</a>
                </div>
                
            </div>
        </div>
        <loading v-if='loading'></loading>
        <p class='no-data' v-if='!loading && !records.length'>暂无数据</p>
        <div class="table-list" v-if='!loading && records.length'>
            <table>
                <thead class="table-list__head">
                    <tr>
                        <th><check-box v-model='all' @input='toggleAll($event)'></check-box></th>
                        <th>序号</th>
                        <th>借款人</th>
                        <th>手机号码</th>
                        <th>借款金额</th>
                        <th>应还款金额</th>
                        <th>约定还款日</th>
                        <th>已逾期</th>
                        <th>业务客服</th>
                        <th>跟进次数</th>
                        <th>跟进状态</th>
                        <th>是否分配</th>
                        <th>分配人员</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody class='table-list__body have-border'>
                    <tr v-for='item in records' :key='item.id'>
                        <td><check-box :key='item.id' v-model='item.check'></check-box></td>
                        <td>{{ item.number || placeholder }}</td>
                        <td>{{ item.name || placeholder }}</td>
                        <td>{{ item.phone || placeholder }}</td>
                        <td>{{ item.lendAmount | toYuan }}元</td>
                        <td>{{ item.needRepayAmount | toYuan }}元</td>
                        <td>{{ item.needRepayDate || placeholder }}</td>
                        <td>{{ item.overDueDays || placeholder }}</td>
                        <td>{{ item.loanOperator || placeholder }}</td>
                        <td>{{ item.followCount || placeholder }}</td>
                        <td>{{ item.followStatus || placeholder }}</td>
                        <td>{{ item.allotStatus || placeholder }}</td>
                        <td>{{ item.repayOperatorName || placeholder }}</td>
                        <td>
                            <div class='option-box'>
                                <span class='option-button' @click='showAllot(item)'>分配</span>
                                <span class='option-button' @click='goDetail(item.id)'>查看</span>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            <!-- <div class="allot-many">
                <button-loading :disabled='selectIds === ""' @click='show_modal_allot_many = true' mid>批量分配</button-loading>
            </div> -->
            <!-- <pagination
                :current-page='listInfo.pageNum'
                :total-page='listInfo.totalPage'
                @pageChange='getList'></pagination> -->
                <el-pagination class="pan"  @current-change="handleCurrentChange" :current-page="listInfo.pageNum"  layout="total, prev, pager, next, jumper" 
                        :total="listInfo.totalCount" :background="true">
                </el-pagination>
        </div>

        <modal 
            title='分配任务'
            :show='show_modal_allot' 
            :loading='loading_allot' 
            confirm-text='分配'
            @close='show_modal_allot = false'
            @confirm='allot'>
            <div class="modal-form-wrap">
                <ul class='modal-form'>
                    <li class='form-item'>
                        <span class="form-item__key"><b>{{curItem.name}}</b> 分配给</span>
                        <div class="form-item__value" v-if='operatorList.length'>
                            <select-group fixed :max-height='260' v-model='operatorSelect'>
                                <select-option v-for='item in operatorList' :key='item.id' :value='item.id' :text='item.name'></select-option>
                            </select-group>
                        </div>
                    </li>
                </ul>
            </div>
        </modal>

        <modal 
            title='批量分配任务'
            :show='show_modal_allot_many' 
            :loading='loading_allot' 
            confirm-text='分配'
            @close='show_modal_allot_many = false'
            @confirm='allotMany'>
            <div class="modal-form-wrap">
                <ul class='modal-form'>
                    <li class='form-item'>
                        <span class="form-item__key">批量分配给</span>
                        <div class="form-item__value" v-if='operatorList.length'>
                            <select-group fixed :max-height='260' v-model='operatorSelect'>
                                <select-option v-for='item in operatorList' :key='item.id' :value='item.id' :text='item.name'></select-option>
                            </select-group>
                        </div>
                    </li>
                </ul>
            </div>
        </modal>
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import footerBar from '../components/FooterBar.vue'
    import selectGroup from '../components/SelectGroup.vue'
    import pickerDate from '../components/PickerDate.vue'
    import selectOption from '../components/SelectOption.vue'
    import radioGroup from '../components/RadioGroup.vue'
    import datePicker from '../components/DatePicker.vue'
    import areaSelect from '../components/AreaSelect.vue'
    import radio from '../components/Radio.vue'
    import loading from '../components/Loading.vue'
    import tabBox from '../components/TabBox.vue'
    import tab from '../components/Tab.vue'
    import checkBox from '../components/CheckBox.vue'
    import toolTip from '../components/ToolTip.vue'
    import modal from '../components/Modal.vue'
    import confirm from '../components/Confirm.vue'
    import buttonLoading from '../components/ButtonLoading.vue'
    import pagination from '../components/Pagination.vue'
    import dateFormat from '../filters/filter-dateFormat'
    import toYuan from '../filters/filter-toYuan'
    import  { mapGetters, mapActions }  from 'vuex'
    import { addLenderValidation, resetAccountPasswordValidation, operatorEditValidation } from '../validation/validation'
    import { repayApi, financeApi, authApi, allApi, lenderApi } from '../api/api'
    import moment from 'moment'


    export default {
        components:{
            footerBar,
            selectGroup,
            selectOption,
            radioGroup,
            tabBox,
            tab,
            radio,
            checkBox,
            areaSelect,
            loading,
            toolTip,
            modal,
            confirm,
            buttonLoading,
            pagination,
            pickerDate,
            datePicker
        },
        filters:{
            dateFormat,
            toYuan,
            booleanToStr(boolean){
                if(boolean === true){
                    return '是'
                }
                else{
                    return '否'
                }
            }
        },
        data() {
            return {
                placeholder:'--',
                recommend:0,
                curItem:{},
                showConfirm:false,
                showFreeze:false,
                phone:'',
                all:false,
                allotSelect:'',
                startTime:'',
                endTime:'',
                sort:{
                    value:'',
                    text:'默认'
                },
                title:'',
                tip:'',
                curRecommend:{
                    value:'',
                    text:'添加到最后'
                },
                curUserId:'',
                cancleRecommendType:{
                    value:'',
                    text:'请选择取消推荐类型'
                },
                recommendType:{
                    value:'',
                    text:'请选择推荐类型'
                },
                lendNumber:'',
                borrowNumber:'',
                show_modal_cancle_recommend:false,
                show_modal_allot:false,
                show_modal_allot_many:false,
                show_modal_recommend:false,
                show_modal_recommend1:false,
                show_modal_recommend2:false,
                show_modal_detail:false,
                loading_set_recommend:false,
                loading_freeze:false,
                loading_cancle_recommend:false,
                operatorList:[],
                listInfo:{},
                records:[],
                operatorSelect:{
                    value:'',
                    text:'请选择分配人员'
                },
                operatorHeaderSelect:'',
                taskIds:'',
                loading:true,
                loading_task_num:false,
                loading_allot:false,
                loading_task:false,
                loading2:true,
                loading_count:true,
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
            currentPage(){
                if(_.isEmpty(this.listInfo)) return 1
                return this.listInfo.pageNum
            },
            hasUserCount(){
                return !_.isEmpty(this.userCount)
            },
            noEditObject(){
                return _.isEmpty(this.editObject)
            },
            noInvoiceInfo(){
                return _.isEmpty(this.invoiceInfo)
            },
            selectIds(){
                let idsArr = []
                let idsStr = ''
                if(this.records.length){
                    _.each(this.records,(value,index)=>{
                        if(value.check == true){
                            idsArr.push(value.id)
                        }
                    })
                    idsStr = idsArr.join(',')
                }
                return idsStr
            },
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip'
            ]),
             handleCurrentChange(val){
                console.log(`当前页: ${val}`);
                this.getList(val);
            },
            // filters
            timestampToDate(timestamp){
                if(!timestamp) return this.placeholder
                return moment(timestamp).format('YYYY-MM-DD')
            },

            // function
            toggleAll($event){
                if($event){
                    _.each(this.records,(val,index)=> {
                        this.records[index].check = true
                    })
                }
                else{
                    _.each(this.records,(value,index)=> {
                        this.records[index].check = false
                    })
                }
            },
            goDetail(id){
                this.$router.replace({
                    name:'after-loan-allot-index',
                    query:_.merge({},this.$route.query,{
                        num:this.listInfo.pageNum,
                        startTime:this.startTime,
                        endTime:this.endTime,
                        allotSelect:this.allotSelect,
                        operatorHeaderSelect:this.operatorHeaderSelect,
                        phone:this.phone
                    })
                })
                this.$router.push({
                    name:'after-loan-detail',
                    params:{
                        id:id
                    }
                })
            },

            showModalDetail(item){
                this.show_modal_detail = true
                this.curDetail = item
            },
            showAllot(item){
                this.show_modal_allot = true
                this.curItem = item
            },
            showModalRecommend(item){

                this.curRecommend = {
                    value:'',
                    text:'添加到最后'
                },
                this.recommendType = {
                    value:'',
                    text:'请选择推荐类型'
                }
                this.curItem = item
                this.curUserId = item.userId

                this.show_modal_recommend = true
                
            },
            showModalFreeze(item){
                this.curItem = item
                this.curUserId = item.userId

                this.showFreeze = true
                
            },
            getNumber(){
                allApi.borrowCount()
                .then(result=>{
                    this.borrowNumber = result
                })
                .catch(error => {
                    console.error(error)
                })
                allApi.lendCount()
                .then(result=>{
                    this.lendNumber = result
                })
                .catch(error => {
                    console.error(error)
                })
            },
            getList(num = 1){
                this.loading = true
                repayApi.allWaitFollowList({
                    pageIndex:num,
                    pageSize:10,
                    phone:this.phone,
                    stringDateFrom:this.startTime,
                    stringDateTo:this.endTime,
                    type:this.allotSelect,
                    operatorId:this.operatorHeaderSelect
                })
                .then(result=>{
                    this.loading = false
                    this.listInfo = result
                    _.each(result.records,(value,index)=>{
                        value.check = false
                    })
                    this.records = _.cloneDeep(result.records)
                    if(result.totalPage < result.pageNum){
                        this.getList(result.totalPage)
                    }
                })
                .catch(error => {
                    console.error(error)
                    this.loading = false
                })
            },
            confirmTip(){
                this.showConfirm = false
                this.setRecommend()
            },
            allot(){
                this.loading_allot = true
                repayApi.allotTask({
                    taskId:this.curItem.id,
                    operatorId:this.operatorSelect.value
                })
                .then(result=>{
                    this.loading_allot = false
                    this.show_modal_allot = false
                    this.getList()
                })
                .catch(error => {
                    console.error(error)
                    this.loading_allot = false
                })
            },
            allotMany(){
                this.loading_allot = true
                repayApi.allotTask({
                    taskId:this.selectIds,
                    operatorId:this.operatorSelect.value
                })
                .then(result=>{
                    this.loading_allot = false
                    this.show_modal_allot_many = false
                    this.all = false
                    this.getList()
                })
                .catch(error => {
                    console.error(error)
                    this.loading_allot = false
                })
            },
            getOperatorList(){
                repayApi.operatorList()
                .then(result=>{
                    this.operatorList = result
                })
                .catch(error => {
                    console.error(error)
                })
            }
        },
        created(){
            let num = this.$route.query.num
            this.startTime = this.$route.query.startTime
            this.endTime = this.$route.query.endTime
            this.allotSelect = this.$route.query.allotSelect || ''
            this.operatorHeaderSelect = this.$route.query.operatorHeaderSelect || ''
            this.phone = this.$route.query.phone
            this.getList(num)
            this.getOperatorList()
        }
    }
</script>

<style lang="scss" scoped>
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    .content-top{
        width:100%;
        height:80px;
        backgrund:red;
        .form-item{
            float:left;
        }
    }
    #after-loan-allot-index{
        .card-title__button-box{
            align-items: center;
        }
        .task-num{
            text-align: right;
            font-size: 16px;
            span{
                display: inline-block;
                font-size: 35px;
                font-weight: normal;
            }
        }
        .allot-many{
            margin-top: 20px;
        }
    }
    body .form-item{
        font-size:16px;
        color:#333;
    }
    body .card-title__button{
        margin-left:20px;
        height:44px!important;
        line-height:44px;
        float:left;
        margin-top:4px;
    }
</style>
